<!-- subpkg_consult/payment/index.vue -->
<script setup>
	import { ref } from 'vue'
	import { storeToRefs } from 'pinia'
	import { preOrderApi, createOrderApi } from '@/services/consult.js'
	import { useConsultStore } from '@/stores/consult.js'
	import { patientDetailApi } from '@/services/patient.js'
	import { orderPayApi } from '@/services/payment.js'
	const { type, patientId, illnessInfo, illnessType, depId } = storeToRefs(
		useConsultStore()
	)
	const paymentRef = ref()
	const preOrderInfo = ref({})
	const createPreOrder = async () => {
		const { code, data, message } = await preOrderApi(type.value)
		if (code !== 10000) return uni.utils.toast(message)
		preOrderInfo.value = data
	}
	createPreOrder()
	const patientDetail = ref({})
	const getPatientDetail = async () => {
		const { code, data, message } = await patientDetailApi(patientId.value)
		if (code !== 10000) return uni.utils.toast(message)
		patientDetail.value = data
	}
	getPatientDetail()
	const orderId = ref('')
	const createOrder = async () => {
		if (orderId.value !== '') return uni.utils.toast('订单不能重复创建！')
		illnessInfo.value.pictures = illnessInfo.value.pictures.map(
			({ url, uuid }) => ({
				id: uuid,
				url,
			})
		)
		const { code, data, message } = await createOrderApi({
			type: type.value,
			patientId: patientId.value,
			...illnessInfo.value,
			illnessType: illnessType.value,
			depId: depId.value,
		})
		if (code !== 10000) return uni.utils.toast(message)
		orderId.value = data.id
		const consultStore = useConsultStore()
		consultStore.illnessInfo = consultStore.initalValue
		consultStore.type = ''
		consultStore.illnessType = ''
		consultStore.depId = ''
		consultStore.patientId = ''
		paymentRef.value.open()
	}
	const onPaymentButtonClick = () => {
		createOrder()
	}
	const onPaymentClose = async () => {
		const { confirm } = await uni.showModal({
			title: '关闭支付',
			content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
			cancelText: '仍要关闭',
			cancelColor: '#848484',
			confirmText: '继续支付',
			confirmColor: '#16c2a3',
		})
		if (!confirm) paymentRef.value.close()
	}
	const onPaymentConfirm = async ({ index }) => {
		if (index === 0) return uni.utils.toast('暂不支持微信支付！')
		const { code, data, message } = await orderPayApi({
			paymentMethod: index,
			orderId: orderId.value,
			payCallback: 'http://localhost/subpkg_consult/room/index',
		})
		if (code !== 10000) return uni.utils.toast(message)
		// 沙箱应用账号，scobys4865@sandbox.com/111111
		// #ifdef H5
		window.location.href = data.payUrl
		// #endif
		// #ifdef MP-WEIXIN
		// wx.requestPayment({})
		// #endif
	}
</script>

<template>
	<scroll-page>
		<view class="payment-page">
			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				:title="`图文问诊 ${preOrderInfo.payment}元`"
			>
				<uni-list :border="false">
					<uni-list-item
						title="极速问诊"
						note="自动分配医生"
						thumb="/static/uploads/doctor-avatar.jpg"
						thumb-size="lg"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${preOrderInfo.couponDeduction}`"
					/>
					<uni-list-item title="积分抵扣">
						<template #footer>
							<view class="uni-list-text-red">
								-¥{{ preOrderInfo.pointDeduction }}
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="实付款">
						<template #footer>
							<view class="uni-list-text-red">
								¥{{ preOrderInfo.actualPayment }}
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>

			<view class="dividing-line"></view>

			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				title="患者资料"
			>
				<uni-list :border="false">
					<uni-list-item title="患者信息">
						<template #footer>
							<view class="uni-list-text-gray">
								{{ patientDetail.name }} | {{ patientDetail.genderValue }} |
								{{ patientDetail.age }}岁
							</view>
						</template>
					</uni-list-item>
					<uni-list-item
						border
						title="病情描述"
						:note="illnessInfo.illnessDesc"
					/>
				</uni-list>
			</uni-section>

			<!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<view class="total-amount">
				合计: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
			</view>
			<button class="uni-button" @click="onPaymentButtonClick">立即支付</button>
		</view>
	</scroll-page>
	<custom-payment
		ref="paymentRef"
		:amount="preOrderInfo.actualPayment"
		:orderId="orderId"
		@close="onPaymentClose"
		@confirm="onPaymentConfirm"
	></custom-payment>
</template>

<style lang="scss">
	@import './index.scss';
</style>
